<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初体验react使用</title>
    <!-- 1.引入对应的库 -->
    <!-- react核心库 -->
    <script src="./js/react.js"></script>
    <!-- 把虚拟dom转换为真实的dom并挂载到页面节点中显示出来 -->
    <script src="./js/react-dom.js"></script>
    <!-- 解析jsx语法的babel库 -->
    <script src="./js/babel.js"></script>
  </head>
  <body>
    <!-- 2.页面节点 -->
    <div id="root"></div>

    <!-- 3.声明对应的渲染语法 -->
    <!-- type:告诉浏览器我现在的脚本是什么语言 默认 text/javascript -->
    <script type="text/babel">
      // <h3>hello React</h3>
      // const vnode = <h3>hello React JSX</h3>
      // 如果是多行，请使用小括号
      const vnode = (
        <ul>
          <li>aaa</li>
          <li>bbb</li>
        </ul>
      )

      ReactDOM.createRoot(document.getElementById('root')).render(vnode)
    </script>
  </body>
</html>
